<template>
  <div >   
    <setForm id="0">       
       <template slot="boxTop">{{$t('message.kvms.keyList')}}</template>
       <template slot="boxMain">                
          <el-table  :data="tableData" style="width: 100%">
            <el-table-column
              prop="cmdId"
              :label="$t('message.kvms.cmdId')">
            </el-table-column>
            <el-table-column :label="$t('message.kvms.description')">
              <template slot-scope="scope">{{showDescription(scope.row)}}</template>
            </el-table-column>
            <el-table-column
              prop="key"
              :label="$t('message.kvms.key')">
            </el-table-column>
          </el-table>
        </template>
    </setForm>
    <setForm id="0">       
       <template slot="boxTop">{{$t('message.kvms.seatPwd')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4">    
              <div class="span3">
               <label >{{$t('message.kvms.seatPwd')}}：</label>	     
              </div>    
            </el-col>
            <el-col :span="20" class="col20">            
            <div class="span17">
              <el-input  v-model="pwd" v-validate="'valiName|max:30|valiStart'"  type="password" class="span17_elinput" name="valiName" ></el-input>  
              <!-- <span v-show="showPwdErr" class="text-style" > {{pwdErr}} </span>          -->
            </div>  
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="savePwd">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
    <setForm id="1">       
       <template slot="boxTop">{{$t('message.kvms.selectLang')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4time">   
               <div class="span3">           
                <label>{{$t('message.kvms.selectLang')}}</label> 
               </div>
            </el-col>
            <el-col :span="20" class="col20"> 
              <div class="span17">
                <el-select v-model="lang" placeholder="">
                  <el-option v-for="lang in langs" :key="lang.value" :value="lang.value" :label="lang.name"></el-option>
                </el-select>
              </div>                
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="saveLang">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
  </div>
</template>

<script>
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import { mapState } from "vuex";
import _ from "lodash";
import ebus from "@/libs/ebus";
import { api, getHostName } from "@/libs/api";
import nuid from "nuid";
import axios from "axios";
import { downloadFile, timeToStr, isContainNameSpecial } from "@/libs/utils";
import md5 from "js-md5";

export default {
  created() {
    this.onInit();
  },
  computed: {
    showPwdErr(){
      var flag = false;
      if(this.pwd.length > 16){
        flag = true;
      }
      return flag;
    },
    pwdErr(){
      var text = '';
      if(this.pwd.trim() == ''){
        text = this.$t('message.kvms.null')
      } else if(this.pwd.length > 16){
        text = this.$t('message.kvms.lengthLimitAt', { x: 16 })
      }
      return text;
    }
  },
  components: {
    setForm,
    mylist
  },
  data() {
    return {
      lang: "zh-cn",
      langs: [
        { name: "简体中文", value: "zh-cn" },
        { name: "English", value: "en" }
      ],
      pwd: "",
      ws: null,
      tableData: []
    };
  },
  methods: {
    onConnect() {
      this.ws = new WebSocket("ws://127.0.0.1:8000/_ws/stbp");
      this.ws.onopen = msg => {
        console.log("onopen:", msg);
      };
      this.ws.onmessage = msg => {
        var res = JSON.parse(msg.data);
        this.tableData = res;
        console.log("onmessage:", msg);
      };
      this.ws.onclose = msg => {
        console.log("onclose:", msg);
      };
    },
    onSend() {
      this.ws.send("hello");
    },
    onInit(){
      this.getData();
      this.getLangState();
    },
    savePwd() {
      if(this.pwd == ''){
        this.notification("error", this.$t('message.kvms.null'));
        return;
      }
      if(this.pwd.length > 16){
        this.notification("error", this.$t('message.kvms.lengthLimitAt', { x: 16 }));
        return;
      }
      if(isContainNameSpecial(this.pwd)){
        this.notification("error", this.$t('message.kvms.containSpecial'));
        return;
      }
      var req = {
        password: "md5#" + md5(this.pwd)
      };
      this.sendRequest("$method.changePassword.kvm.seat.localAuth", JSON.stringify(req));
    },
    saveLang() {
      this.sendRequest("$method.$set.kvm.seat.console.cfg",  JSON.stringify({ lang: this.lang }));
    },
    sendRequest(url, data) {
      api.onRequest( url, data, null, null, function(msg, reply) {
          var res = JSON.parse(msg);
          if (res && res.code == 0) {
            this.onInit();
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this)
      );
    },
    getData(){
      this.tableData = [];
      api.onRequest('$method.$get.kvm.seat.shortcuts', null, null, null, function(msg, reply) {        
          var res = JSON.parse(msg);
          if (res && res.code == 0) {
            this.tableData = res.data;
            res.data.forEach(item => {
              this.getInf(item);
            })
          } else {
            
          }
        }.bind(this)
      );
    },
    getLangState(){
      this.getRequest("$method.$get.kvm.seat.console.cfg");
    },
    getRequest(url){
      api.onRequest( url, null, null, null, function(msg, reply) {
          var res = JSON.parse(msg);
          if (res && res.code == 0) {
            if(url == "$method.$get.kvm.seat.console.cfg"){
              this.lang = res.data.lang;
            } 
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this)
      );
    },
    getInf(row){
      var option = {
        infId: row.description
      };
     
    },
    showDescription(row){
      var description = '';
      var arr = [];
      arr = row.description.split('.');
      if(row.description){
        description = arr[arr.length - 1];
      }
      var x = this.$t('message.method.displayConsole');
      
      description = this.$t('message.method.' + description)
      
      return description
    }
  }
};
</script>

<style @scoped>
.span17 .el-select{
  width: 50%;
}
.span17 .el-select .el-input--suffix{
  width:100%;
}
</style>

